/**
 * Created by cjy on 2016.11.23.
 */
window.onload=function () {
    var aBtn=document.getElementsByTagName('i');
    var aLi=document.getElementsByTagName('li');
    var oPrev=document.getElementById('prev');
    var oNext=document.getElementById('next');
    var oBox=document.getElementById('box');
    function change() {
        for(var i=aLi.length-1;i>=0;i--){
            if(aLi[i].className=='active1'){
                aLi[i].className='';
                aBtn[i].className='';
                if(i==aLi.length-1){
                    aLi[0].className='active1';
                    aBtn[0].className='active2';
                }else {
                    aLi[i+1].className='active1';
                    aBtn[i+1].className='active2';
                };
                i=0
            }
        }
    }


    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aLi[i].index=i;
        aBtn[i].onclick=function (e) {
            for(var i=0;i<aBtn.length;i++){
                aLi[i].className='';
                aBtn[i].className='';
            }
            aLi[this.index].className='active1';
            this.className='active2';
            e.stopPropagation();
        }
    };


    oPrev.onclick=function (e) {
        for(var i=0;i<aLi.length;i++){
            if(aLi[i].className=='active1'){
                aLi[i].className='';
                aBtn[i].className='';
                if(i==0){
                    aLi[aLi.length-1].className='active1';
                    aBtn[aLi.length-1].className='active2';
                }else {
                    aLi[i-1].className='active1';
                    aBtn[i-1].className='active2';
                };
                i=aLi.length
            }
        }
        e.stopPropagation()
    };
    oNext.onclick=function (e) {
        change();
        e.stopPropagation()
    };


    var timer= setInterval(change,2000);
    oBox.onmouseover=function () {
        clearInterval(timer)
    };
    oBox.onmouseout=function () {
        timer= setInterval(change,2000);
    }

}